//配置对象
var setting = {
    amplitudeX: 100, //波长
    amplitudeY: 20, //振幅
    lines: 20, //波浪数量
    hueStartColor: 53, //渐变起始色的色相
    saturationStartColor: 74, //渐变起始色的饱和度
    lightnessStartColor: 67, //渐变起始色的亮度
    hueEndColor: 216, //渐变结束色的色相
    saturationEndColor: 100, //渐变结束色的饱和度
    lightnessEndColor: 7, //渐变结束色的亮度
    smoothness: 3, //波峰平滑度，取值（0-1）内则凹陷
    offsetX: 10, //各波层之间的偏移量
    fill: true, //是否填充颜色
    crazyness: false, //是否呈现不规则状态
}

//定义变量
var svg = document.getElementById('svg'),
    winW = window.innerWidth,
    winH = window.innerHeight,
    Colors = [],
    Paths = [],
    Mouse = {
        x: winW / 2,
        y: winH / 2
    },
    overflow,
    startColor,
    endColor;

/* ========================================= */
/* 路径类 */
/* ========================================= */
function Path(y, fill, offsetX) {
    this.rootY = y;
    this.fill = fill;
    this.offsetX = offsetX;
}
Path.prototype = {
    createRoot: function() {
        this.root = [];
        var offsetX = this.offsetX;
        var x = -overflow + this.offsetX;
        var y = 0;
        var rootY = this.rootY;
        var upSideDown = 0;

        this.root.push({x: x, y: rootY});

        while(x < winW) {
            var value = Math.random() > .5 ? 1 : -1;
            //不规则化
            if(setting.crazyness) {
                x += parseInt((Math.random() * setting.amplitudeX / 2) + (setting.amplitudeX / 2));
                y += (parseInt((Math.random() * setting.amplitudeY / 2) + (setting.amplitudeY / 2)) * value) + rootY;
            } else {
                upSideDown = !upSideDown;
                value = (upSideDown == 0) ? 1 : -1;
                x += setting.amplitudeX;
                y = setting.amplitudeY * value + rootY; 
            }
            this.root.push({x: x, y: y});
        }
        this.root.push({x: winW + overflow, y: rootY});
    },
    createPath: function() {
        var root = this.root;
        var fill = this.fill;
        var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        path.setAttribute('fill', fill);
        path.setAttribute('stroke', fill);
        svg.appendChild(path);
        if(setting.fill) {
            svg.setAttribute('class', 'path');
        } else {
            svg.setAttribute('class', 'stroke');
        }

        //第一、第二个点
        var d = `M -${overflow} ${winH + overflow}`;
        d += `L ${root[0].x} ${root[0].y}`;

        //波浪点
        for(var i = 1; i < this.root.length - 1; i += 1) {
            var prevPoint = root[i - 1];
            var actualPoint = root[i];
            var diffX = (actualPoint.x - prevPoint.x) / setting.smoothness;
            var x1 = prevPoint.x + diffX;
            var x2 = actualPoint.x - diffX;
            var x = actualPoint.x;
            var y1 = prevPoint.y;
            var y2 = actualPoint.y;
            var y = actualPoint.y;
            d += `C ${x1} ${y1} ${x2} ${y2} ${x} ${y}`;
        }

        //倒数第二个点
        var reverseRoot = root.reverse();
        d += `L ${reverseRoot[0].x} ${reverseRoot[0].y}`;
        root.reverse();

        //最后一个点
        d += `L ${winW + overflow} ${winH + overflow}`;

        //关闭路径
        d += ' Z';

        path.setAttribute('d', d);
    }
}

//初始化
function init() {
    randomSetting();
    //overflow
    overflow = Math.abs(setting.lines * setting.offsetX);

    //Colors
    startColor = `hsl(${setting.hueStartColor}, ${setting.saturationStartColor}%, ${setting.lightnessStartColor}%)`;
    endColor = `hsl(${setting.hueEndColor}, ${setting.saturationEndColor}%, ${setting.lightnessEndColor}%)`;
    Colors = chroma.scale([startColor, endColor]).mode('lch').colors(setting.lines + 2);

    //Reset
    Paths = [];
    document.body.removeChild(svg);
    svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttribute('id', 'svg');
    document.body.appendChild(svg);

    //background
    if(setting.fill) {
        svg.style.backgroundColor = Colors[0];
    } else {
        svg.style.backgroundColor = '#000';
    }

    //Lines
    for(var i = 0; i < setting.lines + 1; i += 1) {
        var rootY = parseInt(winH / setting.lines * i);
        var path = new Path(rootY, Colors[i + 1], setting.offsetX * i);
        Paths.push(path);
        path.createRoot();
    }
    Paths.forEach(function(path) {
        path.createPath();
    })
}
init();

window.addEventListener('resize', function() {
    winW = window.innerWidth;
    winH = window.innerHeight;
    init();
});

function randomSetting() {
    setting = {
        lines: parseInt(5 + Math.random() * 45),
        amplitudeX: parseInt(20 + Math.random()* 300),
        amplitudeY: parseInt(Math.random() * 200),
        hueStartColor: parseInt(Math.random() * 360),
        saturationStartColor: 74,
        lightnessStartColor: 67,
        hueEndColor: parseInt(Math.random() * 360),
        saturationEndColor: 90,
        lightnessEndColor: 14,
        smoothness: 1 + parseInt(Math.random() * 9),
        offsetX: parseInt(-20 + Math.random() * 40),
        fill: Math.random() * 1 > 0.3 ? true : false,
        crazyness:  Math.random() * 1 > 0.9 ? true : false
    }
}